---
id: searchbar
title: SearchBar
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import {} from "react-native-elements";
import Usage from "../component_usage/SearchBar.mdx";

## Usage

<Usage />

## Props

:::note
Includes all [Input](/docs/documentation/input#props), [SearchBarBase](/docs/documentation/searchbarbase#props) props.
:::

<div class='table-responsive'>

| Name                      | Type                                                                                                                                                                                                                                                  | Default              | Description                                                                                                               |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `cancelButtonProps`       | Text Style                                                                                                                                                                                                                                            |                      |                                                                                                                           |
| `cancelButtonTitle`       | string                                                                                                                                                                                                                                                |                      |                                                                                                                           |
| `cancelIcon`              | IconNode                                                                                                                                                                                                                                              |                      |                                                                                                                           |
| `clearIcon`               | `IconNode` or `({ name: string; } & IconNode)`                                                                                                                                                                                                        |                      |                                                                                                                           |
| `containerStyle`          | View Style                                                                                                                                                                                                                                            |                      |                                                                                                                           |
| `inputContainerStyle`     | View Style                                                                                                                                                                                                                                            |                      |                                                                                                                           |
| `inputStyle`              | Text Style                                                                                                                                                                                                                                            |                      |                                                                                                                           |
| `leftIconContainerStyle`  | View Style                                                                                                                                                                                                                                            |                      |                                                                                                                           |
| `lightTheme`              | boolean                                                                                                                                                                                                                                               |                      |                                                                                                                           |
| `loadingProps`            | ActivityIndicatorProps                                                                                                                                                                                                                                |                      |                                                                                                                           |
| `onBlur`                  | `(() => void)` or `(((e: NativeSyntheticEvent<TextInputFocusEventData>) => void) & (() => void))` or `((() => any) & (() => void) & ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void))` or `((() => any) & ... 1 more ... & (() => void))` |                      | Callback that is called when the text input is blurred                                                                    |
| `onCancel`                | `(() => void)` or `((() => any) & (() => void))`                                                                                                                                                                                                      |                      |                                                                                                                           |
| `onChangeText`            | `((text: string) => void)` or `(((text: string) => void) & ((text: string) => void))` or `((() => any) & ((text: string) => void) & ((text: string) => void))` or `((() => any) & ((text: string) => void) & ((text: string) => void))`               |                      | Callback that is called when the text input's text changes.Changed text is passed as an argument to the callback handler. |
| `onClear`                 | `(() => void)` or `((() => any) & (() => void))` or `((() => any) & (() => void))`                                                                                                                                                                    |                      |                                                                                                                           |
| `onFocus`                 | `(() => void)` or `(((e: NativeSyntheticEvent<TextInputFocusEventData>) => void) & (() => void))` or `((() => any) & (() => void) & ((e: NativeSyntheticEvent<TextInputFocusEventData>) => void))` or `((() => any) & ... 1 more ... & (() => void))` |                      | Callback that is called when the text input is focused                                                                    |
| `platform`                | `default` or `ios` or `android`                                                                                                                                                                                                                       | `'default' as const` |                                                                                                                           |
| `rightIconContainerStyle` | View Style                                                                                                                                                                                                                                            |                      |                                                                                                                           |
| `round`                   | boolean                                                                                                                                                                                                                                               |                      |                                                                                                                           |
| `searchIcon`              | `IconNode` or `({ name: string; } & IconNode)`                                                                                                                                                                                                        |                      |                                                                                                                           |
| `showCancel`              | boolean                                                                                                                                                                                                                                               |                      |                                                                                                                           |
| `showLoading`             | boolean                                                                                                                                                                                                                                               |                      |                                                                                                                           |

</div>
